<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>薪资统计展示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="Layuimini/lib/layui-v2.6.3/css/layui.css"  media="all">
    <link rel="stylesheet" href="Layuimini/css/public.css" media="all">

</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <form class="layui-form" action="">


            <div class="layui-form-item">
                <label class="layui-form-label">大写显示</label>
                <div class="layui-input-block">
                    <input type="checkbox"  name="open" lay-skin="switch" lay-filter="switchTest" lay-text="开|关">
                        <!-- checked=""  将上面该属性去掉默认为关-->
                </div>
            </div>



    <!--        <div class="layui-inline">
                <label class="layui-form-label">年度选择框</label>
                <div class="layui-input-inline">
                    <select name="year" lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option value="2019">2019年</option>
                        <option value="2020">2020年</option>
                        <option value="2021">2021年</option>
                    </select><div class="layui-form-select"><div class="layui-select-title"><input type="text" placeholder="直接选择或搜索选择" value="" class="layui-input"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit" style=""><dd lay-value="" class="layui-select-tips layui-this" style="">直接选择或搜索选择</dd><dd lay-value="1" class="">layer</dd><dd lay-value="2" class="">form</dd><dd lay-value="3" class="">layim</dd><dd lay-value="4" class="">element</dd><dd lay-value="5" class="">laytpl</dd><dd lay-value="6" class="">upload</dd><dd lay-value="7" class="">laydate</dd><dd lay-value="8" class="">laypage</dd><dd lay-value="9" class="">flow</dd><dd lay-value="10" class="">util</dd><dd lay-value="11" class="">code</dd><dd lay-value="12" class="">tree</dd><dd lay-value="13" class="">layedit</dd><dd lay-value="14" class="">nav</dd><dd lay-value="15" class="">tab</dd><dd lay-value="16" class="">table</dd><dd lay-value="17" class="">select</dd><dd lay-value="18" class="">checkbox</dd><dd lay-value="19" class="">switch</dd><dd lay-value="20" class="">radio</dd></dl></div>
                </div>
            </div>-->
            <div class="layui-inline">
                <label class="layui-form-label">年度选择</label>
                <div class="layui-input-inline">
                    <input type="text" name="date" id="year" lay-verify="date"  placeholder="请选择年份" autocomplete="off" class="layui-input" >
                </div>

            </div>


            <button type="button" class="layui-btn layui-btn-primary" onclick="serachBtn()" title="默认查询所有"
                    lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
            </button>

            <button type="button" class="layui-btn layui-btn-primary" onclick="resethBtn()">
                <i class="fa fa-refresh"></i> 重 置
            </button>

        </form>
        <br>
        <fieldset class="layui-elem-field">
            <legend>总计收入</legend>
            <div class="layui-field-box"  >
                <h3 id="sumSalary"></h3>
                <h3 id="DsumSalary" hidden="hidden"></h3>
            </div>

        </fieldset>
        <fieldset class="layui-elem-field">
            <legend>总计支出</legend>
            <div class="layui-field-box"  >
                <h3 id="sumAmount"></h3>
                <h3 id="DsumAmount" hidden="hidden"></h3>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field">
            <legend>总计月份</legend>
            <div class="layui-field-box"  >
                <h3 id="month"></h3>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field">
            <legend>平均收入</legend>
            <div class="layui-field-box"  >
                <h3 id="avgSalary"></h3>
                <h3 id="DavgSalary" hidden="hidden"></h3>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field">
            <legend>平均支出</legend>
            <div class="layui-field-box"  >
                <h3 id="avgAmount"></h3>
                <h3 id="DavgAmount" hidden="hidden"></h3>
            </div>
        </fieldset>



    </div>
</div>
<script  src="jQuery/jquery-2.1.1.min.js" th:src="@{LightYear/js/jquery.min.js}" charset="utf-8"></script>
<script src="Layuimini/lib/layui-v2.6.3/layui.js" th:src="@{Layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script src="Layuimini/echarts/echarts.min.js" th:src="@{Layuimini/echarts/echarts.min.js}" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#year',
            type: 'year'
        });

        form.on('switch(switchTest)', function(data){
            if(this.checked){
              layer.msg("大写金额显示：开");
               // $("#DsumSalary").attr("display", false);
                $("#DsumSalary").show()
                $("#DsumAmount").show()
                $("#DavgSalary").show()
                $("#DavgAmount").show()
            }else{
                layer.msg("大写金额显示：关");
                //$("#DsumSalary").attr("display", true);
                $("#DsumSalary").hide()
                $("#DsumAmount").hide()
                $("#DavgSalary").hide()
                $("#DavgAmount").hide()
            }

        });


    });


    function resethBtn(){
        $("#year").val("");
        window.location.reload();
    }

    function serachBtn(){
        var year  =$("#year").val();

        $.ajax({
            url:"superSalary/getSalaryInfoByYear",
            type:"GET",
            data:{"year":year},
            success: function (result){
               // console.log(result.data.salaryVoYear.incomeSum);
              if(result.data.salaryVoYear.incomeSum==null){
                  //  layer.msg("数据不存在！")
                  $("#sumSalary").html("数据不存在！");
                  $("#sumAmount").html("数据不存在！");
                  $("#month").html("数据不存在！");
                  $("#avgSalary").html("数据不存在！");
                  $("#avgAmount").html("数据不存在！");
                }else {
                    var data = result.data.salaryVoYear;
                    var   incomeSum = data.incomeSum;
                    var  amountSum = data.amountSum;
                    var  monthCount = data.monthCount;
                    var  incomeAvg = data.incomeAvg;
                    var  amountAvg = data.amountAvg;


           $.ajax({
               url:"amountInWords",
               type:"GET",
               data:{"amount":incomeSum},
               success: function (result){
                   $("#DsumSalary").html(result);
               }
           })
                  $.ajax({
                      url:"amountInWords",
                      type:"GET",
                      data:{"amount":amountSum},
                      success: function (result){
                          $("#DsumAmount").html(result);
                      }
                  })

                  $.ajax({
                      url:"amountInWords",
                      type:"GET",
                      data:{"amount":incomeAvg},
                      success: function (result){
                          $("#DavgSalary").html(result);
                      }
                  })

                  $.ajax({
                      url:"amountInWords",
                      type:"GET",
                      data:{"amount":amountAvg},
                      success: function (result){
                          $("#DavgAmount").html(result);
                      }
                  })



                    $("#sumSalary").html(incomeSum+"元");
                    $("#sumAmount").html(amountSum+"元");
                    $("#month").html(monthCount+"个月");
                    $("#avgSalary").html(incomeAvg+"元");
                    $("#avgAmount").html(amountAvg+"元");
                }

            }

        })

    }

</script>


</body>
</html>